import React, { Component } from "react";
import { Field, } from '@antmjs/vantui'
import { View, Text } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import PropTypes from 'prop-types';


// PdsField 需要的参数
interface PdsFieldComponentProps extends BaseComponentProps {
  name: string,
  data?: string,
  placeholder: string,
  onChange: Function,
  disabled?: boolean,
}

class PdsField extends Component<PdsFieldComponentProps, any> {

  defaultProps = {
    name: "",
    data: "",
    placeholder: '请输入',
    disabled: false,
    onChange: () => {
    }
  }

  constructor(props) {
    super(props);
    this.state = { value: props.data }
  }

  componentDidUpdate(prevProps) {
    if (this.props.data !== prevProps.data) {
      // 当某个特定的prop值发生变化时执行逻辑

      this.setState({ value: this.props.data })
      // 进行其他操作...
    }
  }


  handleFormChange1 = (e) => {
    const { value } = e.target
    const { onChange } = this.props
    this.setState({ value: value })
    // 将表单值传递给外部回调函数
    onChange(value)
  }

  render() {
    const { value } = this.state
    const { name, placeholder, className, disabled } = this.props

    return (
      <View className={classNames(className, 'pds-field')}>
        <Text>{name}</Text>
        <Field disabled={disabled}
          value={value}
          placeholder={placeholder}
          border={false}
          onChange={this.handleFormChange1.bind(this)}
        />
      </View>
    );
  }
}

export default PdsField;

